<template>
  <VPage>
    <div class="mx-[10px]">
      <el-tabs v-model="activeName">
        <el-tab-pane label="订单费用" name="1"></el-tab-pane>
        <el-tab-pane label="其他费用" name="2"></el-tab-pane>
      </el-tabs>
    </div>
    <template v-if="activeName == 1">
      <Order :optionsData="optionsDataAll" />
    </template>
    <template v-else>
      <Other :optionsData="optionsDataAll" />
    </template>
  </VPage>
</template>
<script setup lang="jsx">
import Order from "./components/order/index";
import Other from "./components/other/index";
import { useEnumSelect } from "@/hooks";
import { logisticsList, costList } from "@/api/index.js";
const activeName = ref("1");
const { options: optionsData } = useEnumSelect({
  params: [
    "finance_tail_bill_audit_status",
    "finance_tail_other_fee_audit_status",
  ],
});
const optionsData1 = reactive({});
//获取物流商
const getlogistics = async () => {
  const { data } = await logisticsList();
  optionsData1.logistics = data || [];
};
getlogistics();
const getCostData = async () => {
  const res = await costList();
  optionsData1.cost = res?.data || [];
};
getCostData();
const optionsDataAll = computed(() => {
  return {
    ...optionsData.value,
    ...optionsData1,
  };
});
</script>
<style scoped lang="scss">
:deep(.el-tabs__header) {
  margin: 0;
}
</style>
